import { ElTabPane, ElTabs } from 'element-plus';
import {defineComponent, onMounted, ref, watch} from 'vue';
import BreadCrumb from '~/src/components/BreadCrumb';
import { LdButton } from '~/src/components/Button';
import ButtonTag from '~/src/components/ButtonTag';
import Input from '~/src/components/Input';
import SelectHy from '~/src/components/SelectHy';
import { Steps } from '~/src/components/Steps';
import { UserInfo } from '~/src/components/UserInfo';
import Style1080 from './1080.module.scss';
import Stylevedio from './vediotop.module.scss';
import { KEEP_VIDEO_TOP } from '~/src/config';
import Pagination from "@/components/Pagination";
import { ElEmpty } from 'element-plus';
import zwsj from "@/assets/images/zwsj.png";
import {useRoute} from "vue-router";
import Keyboard from "@/components/keyboard";
import {closeLoading, showLoading} from "@/utils";
import {getMzpbKs, getMzpbZs} from "@/api/his";
import {usePage} from "@/utils/hooks";
import {IMzpbKs, IMzpbZs} from "@/api/typing";
import {ghStore} from "@/store/modules/yvyue";
// 定义标签数据类型（支持分页筛选）
interface TagItem {
    id: string;
    title: string;
}

// 定义Tab数据源类型，包含标签数据
interface TabItem {
    key: string;
    label: string;
    defaultContent: TagItem[]; // 存储标签数据数组
}

export default defineComponent({
    setup() {

        const Style = KEEP_VIDEO_TOP ? Stylevedio : Style1080;
        const pageSize = ref(KEEP_VIDEO_TOP ? 10 : 20);

        const ghstore= ghStore(); // 实例化Pinia存储
        const zqId = ghstore.zq?.ZQ_ID || "";

        // 分页核心数据
        const showDatas = ref<TagItem[]>([]);// 分页当前页展示的数据
        const tabIndex = ref(0); // 当前Tab索引

        // Tab左侧标签（包含各标签页的数据）
        const activeTabKey = ref(); // 默认当前激活的Tab键

        //------------------- 键盘相关1 2 3 ------------------
        /** 1. 点击输入框时显示键盘 */
        const isKeyboardShow = ref(false); // 控制键盘显示/隐藏
        const searchValue = ref(''); // 输入框+键盘的同步值
        const handleInputClick = () => {
            isKeyboardShow.value = true;
        };
        /** 2. 键盘值同步到输入框（接收 Keyboard 的 update:value 事件） */
        const handleKeyboardValueChange = (val: string) => {
            searchValue.value = val;
        };
        /** 3. 点击键盘“确定”时触发的处理逻辑（如筛选表格数据） */
        // const handleKeyboardSubmit = (val: string) => {
        //     // 在当前键盘输入框为空时，不做任何处理直接返回
        //     if (val === ''){
        //         return;
        //     }
        //     isKeyboardShow.value = false; // 先隐藏键盘
        //     // 查到当前输入内容在数据源中匹配的索引值
        //     const index = tabList.value.findIndex((item) => item.key === val);
        //     // 当前索引值有效，执行tab的更新button中的数据
        //     if (index >=0){
        //         // 当前的tab索引在数据中的位置，便于分页数据的更新
        //         tabIndex.value = index;
        //         activeTabKey.value = tabList.value[index].key;
        //         console.log('activeTabKey:', activeTabKey.value)
        //     }
        //     // 键盘输入的内容
        //     console.log('搜索关键词（科室首字母）：', val);
        // };


        //  Tab点击事件
        const handleTabClick = (tab: any) => {
            // 当前选中索引，便于分页数据更新
            activeTabKey.value = mzList.value[tab.index].KS_ID;
            // 更新当前选中的科室数据
            ghstore.setKs(mzList.value[tab.index])
            getZsList(activeTabKey.value);
        };

        // 分页组件数据更新
        const ZsshowDatas = ref<IMzpbZs[]>([]);// 分页当前页展示的数据
        const handlePageChange = (Datas:any) => {
            //分页当前展示的数据
            ZsshowDatas.value = Datas;
        };

        onMounted(() => {
            getMzList();
        });

        //后端科室返回数据
        const page = usePage(500);
        const show_content=ref("");
        const mzList = ref<IMzpbKs[]>([]);
        async function getMzList() {
            console.log("zqId",zqId)
            showLoading();
            let res =null as any;
            // if(window.select_zs==true){
            //     res= await getMzpbZsKS({
            //         ...page.getParam(),
            //         ks_id: zqId,
            //         type: "today",
            //         pym: word.value === "全部" ? "" : word.value,
            //     });
            // }else{
                res= await getMzpbKs({
                    ...page.getParam(),
                    ZQ_ID: zqId,
                    type: "all",
                    // pym: word.value === "全部" ? "" : word.value,
                });
            // }
            console.log("获取的科室",res)
            // works.value = res.pym!;
            // show_content.value=res.content??"";
            mzList.value = res.rows!;
            if (mzList.value.length > 0) {
                activeTabKey.value = mzList.value[0].KS_ID;// 默认选中第一个Tab
                ghstore.setKs(mzList.value[0])// 更新当前选中的科室数据
                getZsList(activeTabKey.value);
            }
            // page.total = res.total!;
            // error.handle(res.rows);
            // await nextTick();
            closeLoading();
        }

        //后端诊室 返诊数据
        const ZsDatas = ref<IMzpbZs[]>([]);// 分页当前页展示的数据

        async function getZsList(ksid: string) {
            console.log("选择诊室ksid",ksid)
            showLoading();
            let res = null as any;
            // if(window.select_zs==true){
            //     res = await getMzpbZsZs({
            //         ...page.getParam(),
            //         ks_id: ksId,
            //         type: "today",
            //         pym: word.value === "全部" ? "" : word.value,
            //     });
            // }else{
                res = await getMzpbZs({
                    ...page.getParam(),
                    KS_id: ksid,
                    type: "all",
                    // pym: word.value === "全部" ? "" : word.value,
                });
            // }

            // works.value = res.pym!;
            // show_content.value=res.content??"";
            console.log("选择诊室",res)
            ZsDatas.value = res.rows!;
            // page.total = res.total!;
            // error.handle(res.rows);
            // await nextTick();
            closeLoading();
        }

        return () => (
            <>
                <UserInfo />
                <Steps />
                <div class={Style.container_mar}>
                    {/* 标题与输入框 */}
                    <div class={Style.title}>
                        <div>
                            <BreadCrumb style={{width: "100%",whiteSpace: "nowrap"}}/>
                        </div>
                        <div class={Style.search}>
                            {/*科室搜索框*/}
                            {/*<Input*/}
                            {/*    placeholder='输入科室首字母'*/}
                            {/*    modelValue={searchValue.value} // 绑定搜索值*/}
                            {/*    onClick={handleInputClick} // 点击显示键盘*/}
                            {/*    // 禁用原生输入（完全依赖键盘组件）*/}
                            {/*    readonly*/}
                            {/*></Input>*/}
                        </div>
                    </div>

                    {/* Tab主体区域 */}
                    <div class={Style.container}>
                        <div class={[Style.tab, "select_department_tabs"]}>
                            <ElTabs
                                type="border-card"
                                tabPosition="left"
                                onTabClick={handleTabClick}
                                modelValue={activeTabKey.value}//改变的当前tab标签的选中项
                            >
                                {mzList.value.map((tab) => (
                                    <ElTabPane
                                        key={tab.KS_ID}
                                        name={tab.KS_ID}
                                        v-slots={{
                                            label: () => <div style={{ textAlign: 'center' }}>{tab.KS_MC}</div>
                                        }}
                                    >
                                        {/* 标签列表 */}
                                        <div class={Style.tagsMar}>
                                            <div class={Style.tags}>
                                                {ZsshowDatas.value.length > 0 ?
                                                    ZsshowDatas.value.map((tag) => (
                                                    <ButtonTag
                                                        key={tag.ZS_ID}
                                                        class={Style.tags_item}
                                                        active={false}//默认是没选中
                                                        to="/SelectDoctor"
                                                        TagItem={tag}
                                                    >
                                                        {/*当前数据源中的标签数据*/}
                                                        {tag.ZS_MC}
                                                    </ButtonTag>
                                                    )):
                                                    <div style={{marginTop:'-5%'}}>
                                                        <img src={zwsj} style={{width:'100%',height:'100%'}}/>
                                                    </div>
                                                }
                                            </div>
                                        </div>

                                        {/* 分页组件（） */}
                                        {
                                            <div style={{margin: '0 64px'}}>
                                                <Pagination
                                                    pageSize={pageSize.value}
                                                    Data={ZsDatas.value}
                                                    onPageChange={handlePageChange}
                                                    customClass={Style.custom_pagination}
                                                />
                                            </div>
                                        }
                                    </ElTabPane>
                                ))}
                            </ElTabs>
                        </div>
                    </div>
                </div>
                {/*<Keyboard*/}
                {/*    type="letter" // 键盘类型：/数字字母 normal  /纯字母 letter  /纯数字 number"*/}
                {/*    modelValue={isKeyboardShow.value} // 控制显示/隐藏*/}
                {/*    value={searchValue.value} // 双向同步输入值*/}
                {/*    onUpdate:modelValue={(val) => isKeyboardShow.value = val} // 接收键盘关闭事件*/}
                {/*    onUpdate:value={handleKeyboardValueChange} // 接收键盘输入值*/}
                {/*    onKeySubmit={handleKeyboardSubmit} // 接收键盘确定事件*/}
                {/*/>*/}
            </>
        );
    },
});
